<template>
  <div class="box" :class="{ active: !active }">
    <div class="sharp_r_box">
      <div class="sharp_r">
        <a>
          {{ item.sharp.toFixed(2) }}
        </a>
        <sub>
          夏普比例
        </sub>
      </div>
    </div>
    <div class="content">
      <div class="title">{{ item.country }} · {{item.index_name}}</div>
      <div>
        <label>{{item.feature}}</label>
        <label>{{item.size_name}}</label>
      </div>
    </div>
    <div class="y_r">
      <div>
        <a>{{ item.yr | vToFixedTwo }}</a><sub>%</sub>
      </div>
      <sub>近一年收益率</sub>
    </div>
  </div>
</template>

<script>
export default {
  name: 'risk-ratings-card',
  props: {
    item: Object,
    active: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {

  },
  created () {

  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  background-image: linear-gradient(-232deg, #91A5F8 0%, #6379F8 100%);
  box-shadow: 0 1px 4px 0 rgba(102,102,102,0.50);
  padding: 1.4em 1em;
  margin-bottom: 1em;
  color: white;
  justify-content: space-between;
  border-radius: 8.1px;
  height: 4em;
  .sharp_r_box {
    height: 4em;
    width: 4em;
    border-radius: 6.48px;
    border: 1px solid #FFF;
    color: white;
    display: flex;
    .sharp_r {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      a {
        font-weight: bold;
        display: flex;
        flex: 1.5;
        font-size: 1.6em; 
        justify-content: center;
        align-items: center;
      }
      sub {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 0.8em;
      }
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-star;
    flex: 2;
    padding: 0 0.5em;
    label {
      border: 1px solid white;
      padding: 0.2em 0.8em;
      border-radius: 5px;
      font-size: 0.8em;
    }
    .title {
      font-size: 1.4em;
    }
  }
  .y_r {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    div {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      a {
        color: white;
        font-size: 1.8em;
        font-weight: bold;
      }
      sub {
        color: white;
        display: flex;
        margin-bottom: 3px;
      }
    }
    sub {
      color: white;
    }
  }
}

.active {
  background: white;
  color: #666;
  .sharp_r_box {
    border: 1px solid #4A90E2;
    color: #4A90E2;
    .sharp_r {
      a {
      }
      sub {
      }
    }
  }
  .content {
    label {
      border: 1px solid #FE7A4A;
      color: #FE7A4A;
    }
    .title {
      font-size: 1.4em;
    }
  }
  .y_r {
    div {
      a {
        color: #FF0F2C;
      }
      sub {
        color: #FF0F2C;
        display: flex;
        margin-bottom: 3px;
      }
    }
    sub {
      color: #666;
    }
  }
}

</style>